<template>
	<view class="bg">
		<z-nav-bar backState="1000" type="transparent" bgColor="#F0F4F9" title=" " fontColor="#000"></z-nav-bar>
		
		<view class="u-p-t-80 u-p-l-80 u-p-r-80">
			<view class="">
				<text class="u-font-45 text-bold">请输入验证码</text>
			</view>
		</view>
		
		<view class="u-m-t-80 u-p-l-80 u-p-r-80">
			<text>验证码已发送至 </text>
			<text>{{requestParams.mobile}}</text>
		</view>
		
		<view class="u-p-t-80 u-p-l-80 u-p-r-80" style="min-height:100vh;">
			<u-code-input v-model="requestParams.smsCode"
										maxlength="4" 
										mode="line" 
										:hairline="true" 
										:focus="true" 
										space="29" 
										size="50"
										@finish="handleInputFinish"></u-code-input>
			<view class="u-p-t-60 fr">
				<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
				<u-button @tap="getCode" :text="tips" type="" size="mini" ></u-button>
			</view>
		</view>
	</view>
</template>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<script>
	import {smsCode} from '@/api/login.js'
	// import {sendSmsType} from '@/common/const.js'
	
	export default{
		data(){
			return{				
				tips: '',
				requestParams:{
					mobile:'',
					type:'',
					smsCode:''
				}
			}
		},
		onLoad(e){
			this.requestParams.mobile = e.mobile
			this.targetUrl = e.targetUrl
			this.init()
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.$nextTick(()=>{
					this.getCode()
				})
				
			},
			
			
			codeChange(text) {
				this.tips = text;
			},
				
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					smsCode({
						phone: this.requestParams.mobile,
					}).then(res=>{
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			/**
			 * 输入验证码完成
			 */
			handleInputFinish(){
				const data = {
					mobile:this.requestParams.mobile,
					smsCode:this.requestParams.smsCode
				}
				// 验证码登录
				this.$store.dispatch("loginSms", data).then(res=>{
					console.log('登录成功')
					uni.navigateBack()
					// if(this.targetUrl){
					// 	this.jumpUtil.jumpTo(jumpTypeEnum.reLaunch, this.targetUrl, false)
					// } else {
					// 	uni.navigateBack()
					// }
					//uni.$emit("reloadShareMenuStatus")
					//this.jumpUtil.jumpTo(jumpTypeEnum.reLaunch, '/pages/home/index', false)
				})
			},
			
			change(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg{
		// background: url(../../../static/images/login/login_bg.png);
		background-size: 100% 100%;
		height: 300rpx;
		// opacity: 0.5;
		padding-top: 150rpx;
	}
</style>